<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container">
	
	
	</div>
	
	
	
    <script src="three.min.js"></script>
    <script defer="defer">
	
	
	
	
	
	
      // revolutions per second
      var angularSpeed = 0.02; 
      var lastTime = 0;
 
      // this function is executed on each animation frame
      function animate(){
        // update
        var time = (new Date()).getTime();
        var timeDiff = time - lastTime;
        var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
        //cylinder.rotation.x += angleChange;
        //cylinder.rotation.z += angleChange;
		//cylinder.rotation.z =12;
		sphere.rotation.y += angleChange;
		sphere2.rotation.y += angleChange*0.8;
		sphere2.rotation.z += angleChange*0.2;
        lastTime = time;
 
        // render
        renderer.render(scene, camera);
 
        // request new frame
        requestAnimationFrame(function(){
            animate();
        });
      }
 
 
	
		
		
      // renderer
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);
 
      // camera
      var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
      camera.position.z = 700;
 
      // scene
      var scene = new THREE.Scene();
	  
	  
	  
	  var material = new THREE.MeshPhongMaterial({
       map: THREE.ImageUtils.loadTexture('earthmap_2500x1250.jpg'),
	   specular: '#fff',
	  // emissive: '#fff',
       shininess: 80
	   
      });
	  
	  //сфера
	  var sphere = new THREE.Mesh(new THREE.SphereGeometry(150, 100, 100), material);
	  sphere.overdraw = true;
      scene.add(sphere);
       
	
	//var cylBleu = new THREE.MeshNormalMaterial({color: 0x000, transparent: true, opacity: 0.1 });

	
	 
	  var material_cloud = new THREE.MeshPhongMaterial({
       map: THREE.ImageUtils.loadTexture('earth-clouds1.png'),
	   transparent: true,
	   opacity: 0.9,
	   specular: '#fff',
       // intermediate
       color: '#a0cdff',
       // dark
       emissive: '#fff',
       shininess: 1 
	   
      });
		
	var sphere2 = new THREE.Mesh(new THREE.SphereGeometry(155, 100, 100), material_cloud);
	  sphere2.overdraw = true;
      scene.add(sphere2);
	  
	  

      // add subtle ambient lighting
      var ambientLight = new THREE.AmbientLight(0x222222);
	  ambientLight.castShadow = false;
	  
      scene.add(ambientLight);
      
      // directional lighting
      var directionalLight = new THREE.DirectionalLight(0xffffff);
      directionalLight.position.set(1, 1, 1).normalize();
	  directionalLight.castShadow = false;
	   scene.add(directionalLight);
	   
	   
	   
	   var directionalLight2 = new THREE.DirectionalLight(0x000029);
      directionalLight2.position.set(1, -1, 1).normalize();
	  directionalLight2.castShadow = false;
	   scene.add(directionalLight2);
	   
	   
      
      // start animation
      animate();
    </script>
	
	
	
  </body>
</html>